<template>
  <view class="product-list">
    <uv-waterfall
      ref="waterfallRef"
      v-model="waterfallList"
      :add-time="10"
      :left-gap="10"
      :right-gap="10"
      :column-gap="10"
      @changeList="changeList"
    >
      <template #list1>
        <!-- 第一列数据 -->
        <view>
          <view
            v-for="item in form.list1"
            :key="item.sku_id"
            class="product-item"
            @click="$.router.go('/pages/goods/detail', {id: item.product_id || item.id})"
          >
            <view class="product-box">
              <image class="product-img" :src="item.img || $.defImg" mode="" />
              <view class="product-main">
                <view class="ellipsis-2 leading-20">{{ item.product_name }} {{ item.sku_name }}</view>
                <view class="flex product-money">
                  <view class="">￥</view>
                  <view class="product-price">{{ item.retail_price.toString().split('.')[0] }}</view>
                  <view v-if="item.retail_price.toString().split('.')[1]" class="">
                    .{{ item.retail_price.toString().split('.')[1] }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template #list2>
        <!-- 第二列数据 -->
        <view>
          <view
            v-for="item in form.list2"
            :key="item.sku_id"
            class="product-item"
            @click="$.router.go('/pages/goods/detail', {id: item.product_id || item.id})"
          >
            <view class="product-box">
              <image class="product-img" :src="item.img || $.defImg" mode="" />
              <view class="product-main">
                <view class="ellipsis-2 leading-20">{{ item.product_name }} {{ item.sku_name }}</view>
                <view class="flex product-money">
                  <view class="">￥</view>
                  <view class="product-price">{{ item.retail_price.toString().split('.')[0] }}</view>
                  <view v-if="item.retail_price.toString().split('.')[1]" class="">
                    .{{ item.retail_price.toString().split('.')[1] }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
    </uv-waterfall>

    <template v-if="status">
      <uv-load-more :status="status" />
    </template>
  </view>
</template>

<script setup>
import { ref, defineProps, watch } from 'vue'
import $ from '@/sheep'
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  status: String
})
const waterfallRef = ref(null)
const waterfallList = ref([])

const { form, resetForm } = $.useForm({
  list1: [],
  list2: []
})

watch(() => props.list, val => {
  waterfallList.value = val
  if (!val.length) {
    waterfallRef.value.clear()
    resetForm()
  }
})

function changeList(e) {
  form[e.name].push(e.value)
}
</script>

<style lang="scss">
	.product-list {
		--width: 344rpx;
		width: 750rpx;
		margin: 0 auto;
		padding: 20rpx 0;

		.product-item {
			// padding: 0 10rpx;
			margin-bottom: 20rpx;
		}

		.product-box {
			width: var(--width);
			background-color: #fff;
			border-radius: 12rpx;
			overflow: hidden;
			box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
		}

		.product-img {
			display: block;
			width: 100%;
			height: var(--width);
		}

		.product-main {
			padding: 10rpx 16rpx 16rpx 16rpx;
		}

		.product-money {
			height: 36rpx;
			line-height: 36rpx;
			font-weight: 700;
			color: $uv-primary;
			margin-top: 8rpx;
		}

		.product-price {
			font-size: 36rpx;
		}
	}
</style>
